<!DOCTYPE html>
<html>

<head>
    <link rel="shortcut icon" href="assets/icon.ico" type="image/x-icon" />
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
    <meta charset="utf-8">
    <title>VS Code Config Helper 3</title>
</head>

<body>
    <main id="app">
        <v-app>
            <v-container style="margin-bottom: 70px;">
                <v-row justify="center">
                    <v-col md="9">
                        <div class="text-h4 text-center pt-2">
                            <v-badge content="v3.x" color="red">
                                VS Code Config Helper
                            </v-badge>
                        </div>
                        <div class="subtitle-1 text-center pt-1">简单、快捷的 VS Code C++ 配置工具</div>
                    </v-col>
                </v-row>
                <v-row justify="center">
                    <v-col md="9">
                        <v-row justify="center">
                            <v-col sm="4">
                                <v-btn x-large rounded color="primary" @click="downloadLanzou" block>
                                    <v-icon>mdi-download</v-icon>
                                    <span class="text-none px-1 pb-1">
                                        网盘下载
                                        <small>（{{platformName[platform]}}）</small>
                                    </span>
                                </v-btn>
                            </v-col>
                            <v-col sm="3" class="d-flex flex-row justify-center align-center">
                                <span>
                                    密码
                                    <code id="lanzouPasscode">{{lanzouPasscode[platform]}}</code>
                                    <v-btn icon depressed data-clipboard-target="#lanzouPasscode" id="copyPasscode">
                                        <v-icon small>mdi-content-copy</v-icon>
                                        </a>
                                </span>
                            </v-col>
                        </v-row>
                        <v-row justify="center">
                            <v-col sm="4">
                                <v-btn large rounded @click="downloadGithub" color="normal" depressed block>
                                    <v-icon>fa-github</v-icon>
                                    <span class="text-capitalize px-2">GitHub 下载</span>
                                </v-btn>
                            </v-col>
                            <v-col sm="3" class="d-flex flex-row justify-center align-center">
                                <span>
                                    版本
                                    <code>{{latestVersion}}</code>
                                </span>
                            </v-col>
                        </v-row>
                    </v-col>
                </v-row>
                <v-row justify="center">
                    <v-col md="9">
                        <details>
                            <summary class="text-center text-h6" style="user-select: none;">视频演示</summary>
                            <iframe src="//player.bilibili.com/player.html?aid=292212272&bvid=BV1tf4y1V7F6&cid=383825385&page=1&high_quality=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="400"> </iframe>
                        </details>
                    </v-col>
                </v-row>
                <v-row justify="center" class="mt-12 text-center">
                    <v-col cols="9">
                        <img src="assets/icon.ico" width="50" height="50">
                        <div class="grey--text text--darken-2">
                            此项目基于 <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3</a> 开源许可发布。
                        </div>
                    </v-col>
                </v-row>
                <v-footer fixed height="70px">
                    <v-row justify="center">
                        <v-col cols="9">
                            <a href="https://guyutongxue.gitee.io/VSCodeConfigHelper" target="_blank">版本 2.x 主页</a>
                            <a href="https://guyutongxue.github.io" target="_blank">Guyutongxue</a>
                        </v-col>
                    </v-row>
                </v-footer>
            </v-container>
        </v-app>
    </main>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.28/src/ua-parser.min.js"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            vuetify: new Vuetify(),
            data: {
                latestVersion: "获取中...",
                githubUrl: "https://github.com/Guyutongxue/VSCodeConfigHelper3",
                platform: "win",
                platformName: {
                    win: "Windows",
                    mac: "macOS",
                    linux: "GNU/Linux"
                },
                lanzouUrl: {
                    win: "https://gytx.lanzoui.com/b01cl900j",
                    mac: "https://gytx.lanzoui.com/b01cp82aj",
                    linux: "https://gytx.lanzoui.com/b01cp82cb"
                },
                lanzouPasscode: {
                    win: "5sjw",
                    mac: "5xcb",
                    linux: "5zxt"
                }
            },
            created: function () {
                const uaParser = new UAParser();
                const ua = uaParser.getOS();
                if (ua.name === "Mac OS") {
                    this.platform = "mac";
                } else if (["Chromium OS", "Debian", "Deepin", "Mint", "Ubuntu"].includes(ua.name)) {
                    this.platform = "linux";
                }
                fetch("https://api.github.com/repos/Guyutongxue/VSCodeConfigHelper3/releases/latest")
                    .then(r => r.json())
                    .then(v => {
                        this.latestVersion = v["tag_name"];
                        // if (v["assets"] && v["assets"].length > 0) {
                        //     const asset = v["assets"][0];
                        //     this.githubUrl = asset["browser_download_url"];
                        // } else {
                            this.githubUrl = v["html_url"];
                        // }
                    });
            },
            methods: {
                downloadLanzou: function () {
                    window.open(this.lanzouUrl[this.platform]);
                },
                downloadGithub: function () {
                    window.open(this.githubUrl)
                }
            }
        });
        const clipboard = new ClipboardJS("#copyPasscode");
    </script>
</body>

</html>